<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>我的粉丝</title>
	<link rel="stylesheet" type="text/css" href="../../../css/api.css" />
	<style>
		.header {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
		}

		.header .header_top {
			height: 90px;
			position: relative;
			background-image: linear-gradient(45deg,
		#ff3a24 0%,
		#ff5340 100%);
			padding: 0 15px;
		}

		.header .head {
			position: relative;
			height: 44px;
			line-height: 44px;
			text-align: center;
			font-size: 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.header .head img {
			width: 20px;
			height: 20px;
		}

		.header .head .input {
			flex: 1;
			height: 30px;
			margin: 0 10px;
			background-color: #ffffff;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
		}

		.header .head .input input {
			width: 100%;
			flex: 1;
			font-size: 13px;
			color: #000;
			margin: 0 5px;
			line-height: 32px;
			outline: none;
		}

		.header .head .search {
			flex: none;
			width: 60px;
			height: 30px;
			border-radius: 30px;
			background-color: #ffffff;
			font-size: 14px;
			color: #000;
			text-align: center;
			line-height: 30px;
		}

		.header .fans_bg {
			position: absolute;
			bottom: -35px;
			left: 15px;
			right: 15px;
			height: 75px;
			border-radius: 10px;
			background-color: #ffffff;
			padding: 0 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.header .fans_bg .fans_left {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 10px;
			color: #ff3a24;
			line-height: 10px;
		}

		.header .fans_bg .fans_left .left_top {
			font-size: 16px;
			font-weight: bold;
			color: #ff3a24;
			line-height: 16px;
			margin-bottom: 5px;
		}

		.header .fans_bg .fans_right {
			font-size: 36px;
			color: #ff3a24;
			font-weight: bold;
		}

		.header .header_bot {
			background: #f5f5f5;
			padding: 50px 15px 0px;
			border-radius: 35px;
		}

		.one_det {
			height: 75px;
			padding: 0 15px;
			background-color: #fff;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.one_det img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-right: 10px;
		}

		.one_det .det_right {
			flex: 1;
			width: 100%;
			font-size: 14px;
			color: #333;
		}

		.one_det .det_right .right_top,
		.right_bot {
			line-height: 14px;
		}

		.one_det .det_right .right_top {
			margin-bottom: 10px;
		}

		.f_w {
			font-weight: bold;
		}

		.one_det .det_right .right_bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.one_det .det_right .right_bot .bot_right {
			width: 50px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			border-radius: 20px;
			border: 1px solid #666666;
		}



		.div_tc {
			width: 100%;
			height: 10px;
			background: #f5f5f5;
		}

		.icon_clear {
			font-size: 0;
			height: 22px;
			width: 22px;
			display: block;
		}

		nav {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-flex-flow: row;
			flex-flow: row;
			position: relative;
			width: 100%;
			height: 45px;
			padding: 20px 0 10px;
		}

		nav .menu {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			width: 100%;
			height: 45px;
			line-height: 45px;
			font-size: 14px;
			color: #ff3a24;
			text-align: center;
			position: relative;
		}

		nav .menu.selected {
			font-size: 14px;
			color: #ff3a24;
			font-weight: bolder;
		}

		nav .menu.selected::after {
			content: '';
			display: block;
			width: 10px;
			height: 6px;
			background-image: url(../../../image/home_icon_selected.png);
			background-position: center center;
			background-size: 10px 6px;
			background-repeat: no-repeat;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
	</style>
</head>

<body>
	<div class="header">
		<div class="header_top">
			<div class="head">
				<img src="../../../image/icon_return.png" alt="" onclick="back()">
				<div class="input">
					<img src="../../../image/order_icon_search.png" alt="">
					<input type="text" placeholder="请输入粉丝手机号/邀请码" oninput="changes()" id='nick_name' type="search">
					<label class="icon_clear" for="nick_name">
						<img src="../../../image/search_icon_clear.png" alt="" class="ipt_img none"
							onclick="emptyInput()">
					</label>
				</div>
				<div class="search" onclick="ss_fans_list()">搜索</div>
			</div>
			<div class="fans_bg">
				<div class="fans_left">
					<span class="left_top">我的粉丝</span>
				</div>
				<div class="fans_right"></div>
			</div>
		</div>
		<div class="header_bot">
			<div class="one_det">
				<img src="../../../image/timg5.jpg" alt="" class="avatar_url">
				<div class="det_right">
					<div class="right_top">
						<span class="f_w">团队长：</span>
						<span class="name"></span>
					</div>
					<div class="right_bot">
						<span class="f_w">微信号：</span>
						<span class="name"></span>
						<div class="bot_right" onclick="copy()">复制</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="two_det">
		<nav id="nav">
			<div class="menu selected" tapmode="selected" onclick="fnSetNavMenuIndex(0);">我的粉丝</div>
			<div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(1);">待激活粉丝</div>
		</nav>
	</div>

</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/zepto.js"></script>
<script type="text/javascript">
	let frameIndex = 0;
	let next_p = 1;
	let member_info;
	let navH, headerH, menus, frameH, header_borH;
	apiready = function () {
		resume("my_fans");

		menus = $api.domAll(nav, '.menu');
		headerH = $api.fixStatusBar($api.dom('.header_top'))
		navH = $api.offset($api.dom('nav')).h;

		member_info = api.getGlobalData({
			key: 'member_info'
		})

		$api.html($api.dom(".fans_right"), member_info.directly_fans);

		if (member_info.parent_info.length != 0) {
			frameH = headerH + navH + $api.offset($api.dom('.header_bot')).h;
			$api.dom('.two_det').style.paddingTop = headerH + $api.offset($api.dom('.header_bot')).h + 'px';

			$api.dom(".avatar_url").src = member_info.parent_info.avatar_url

			$api.html($api.dom(".det_right .right_top .name"), member_info.parent_info.nick_name)

			if (member_info.parent_info.wx_id) {
				$api.html($api.dom(".det_right .right_bot .name"), member_info.parent_info.wx_id)
			}
		} else {
			$api.dom('.two_det').style.paddingTop = 15 + headerH + 'px';
			frameH = headerH + navH + 15;
			$api.addCls($api.dom('.header_bot'), "none")
		}

		openFrames();

		$("#nick_name").on('keypress', function (e) {
			if (e.keyCode == '13') {
				e.preventDefault();
				ss_fans_list()
			}
		});

	};

	function copy() {
		let clipBoard = api.require("clipBoard");
		clipBoard.set({
			value: member_info.parent_info.wx_id
		}, function (ret, err) {
			if (ret) {
				api.toast({
					msg: "复制成功",
					duration: 2000,
					location: 'middle'
				});
			} else {
				// alert(JSON.stringify(err));;
			}
		});
	}


	function openFrames() {
		api.openFrameGroup({
			name: 'fans_frame',
			scrollEnabled: true,
			background: '#f5f5f5',
			rect: {
				x: 0,
				y: frameH,
				w: 'auto',
				h: 'auto'
			},
			index: 0,
			frames: [{
				name: 'fans_frame1',
				url: './fans_frame1.html',
			}, {
				name: 'fans_frame2',
				url: './fans_frame2.html',
			}]
		}, function (ret, err) {
			fnSetNavMenuSelected(ret.index)
		});
	}

	function fnSetNavMenuSelected(index_) {
		frameIndex = index_
		for (var i = 0; i < menus.length; i++) {
			if (index_ == i) {
				$api.addCls(menus[i], 'selected');
			} else {
				$api.removeCls(menus[i], 'selected');
			}
		}
	}

	function fnSetNavMenuIndex(index_) {
		fnSetNavMenuSelected(index_);
		api.setFrameGroupIndex({
			name: 'fans_frame',
			index: index_,
			scroll: true
		});
	}

	function changes() {
		let val = $.trim($api.dom("#nick_name").value)
		if (val.length > 0) {
			$api.removeCls($api.dom(".ipt_img"), 'none');
		} else {
			$api.addCls($api.dom(".ipt_img"), 'none');
		}
		if (val.length == 0) {
			ss_fans_list()
		}
	}

	function ss_fans_list() {
		if ($.trim($api.dom("#nick_name").value) > 0) {
			api.setGlobalData({
				key: 'fans_search',
				value: $.trim($api.dom("#nick_name").value)
			})
			if (frameIndex) {
				api.execScript({
					frameName: 'fans_frame2',
					script: 'ss_fans_list()'
				});
			} else {
				api.execScript({
					frameName: 'fans_frame1',
					script: 'ss_fans_list()'
				});
			}
		}
	}

	function emptyInput(el) {
		$api.addCls($api.dom('.ipt_img'), 'none');
		$api.dom("#nick_name").value = "";
		ss_fans_list()
	}

	function back() {
		api.closeWin({
		});
	}
</script>

</html>
